<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>更换邮箱</title>
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
        <meta content="yes" name="apple-mobile-web-app-capable"/>
        <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
        <meta content="telephone=no" name="format-detection"/>
        <link href="css/login.css" rel="stylesheet" type="text/css"/>        
        <script type="text/javascript" src="js/jquery.min.js" ></script>
        <link href="css/aui/aui.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="js/aui/aui-dialog.js" ></script>

    </head>
    <body>
        <section class="aui-flexView">
            <header class="aui-navBar aui-navBar-fixed b-line">
                <a href="modify" class="aui-navBar-item">
                    <i class="icon icon-return"></i>
                </a>
                <div class="aui-center">
                    <span class="aui-center-title" style="font-size: 16px;">更换邮箱</span>
                </div>
            </header>#include('header.html')
            <section class="aui-scrollView">
                <div class="aui-code-box">
                    <form action="" method="post" onsubmit="return checkform()">
                        
                        <p class="aui-code-line">
                            <input type="password" class="aui-code-line-input" name="password" value="" id="mima" autocomplete="off" placeholder="当前账号密码"/>
                        </p>
                        <p class="aui-code-line aui-code-line-clear">
                            <!-- <i class="aui-show pass1  operate-eye-open"></i> -->
                            <input type="text" class="aui-code-line-input password1" name="uEmail" id="newemail" placeholder="邮箱地址" value="">
                        </p>
                        <p class="aui-code-line">
                            <input type="text" class="aui-code-line-input" name="emailcode" id="ecode" autocomplete="off" placeholder="验证码"/>
                            <button style="padding: 0;width: 90px;height: 30px; line-height: 30px;font-size: 15px;margin-bottom: 5px;position: absolute; top: 10px;right: 15px;" type="button" class="fr am-btn am-btn-xm am-round am-btn-success getemailcode" id="getemailcode">获取验证码</button>
                        </p>
                        <div class="aui-code-btn">
                            <button style="font-size: 16px;">提交</button>
                        </div>
                    </form>
                </div>

                <p style="position: fixed;width: 100%;bottom: 10px;text-align: center;">当前邮箱：${user.uEmail}</p>
            </section>
        </section>

                <script type="text/javascript">
                    var dialog = new auiDialog({})
                        function checkform(){

                            var str1=document.getElementById("mima").value;
                            var str2=document.getElementById("newemail").value;
                            var reg=/^([a-zA-Z0-9]+[-_.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[-_.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,6}$/;

                            if(str1==""){
                                dialog.alert({
                                        // title:"用户名",
                                        msg:'请输入账号密码！',
                                        buttons:['确定']
                                    },function(ret){
                                        console.log(ret)
                                    });
                                return false;
                            }
                           else {
                                if(reg.test(str2)==false){
                                dialog.alert({
                                        // title:"用户名",
                                        msg:'请输入有效的邮箱格式！',
                                        buttons:['确定']
                                    },function(ret){
                                        console.log(ret)
                                    });
                                return false;
                            }
                            else{
                                $.ajax({
                                        url:"do_modify_email",
                                        dataType:"json",
                                        type:"post",
                                        data:$("form").serialize(),
                                        success:function(result){
                                            if(result.status=="1"){
                                                dialog.alert({
                                                    msg:'邮箱更换成功。',
                                                    buttons:['确定']
                                                },function(ret){
                                                    window.location.reload();
                                                });
                                            }
                                            else {
                                                dialog.alert({
                                                    msg:''+result.tips,
                                                    buttons:['确定']
                                                });
                                            }
                                        },
                                        error:function(result){
                                            console.log(result);
                                            dialog.alert({
                                                msg:'系统繁忙！',
                                                buttons:['确定']
                                            });
                                        }
                                    });

                                return false;
                            }
                            return true;
                        }
                    }
                    </script>   
        <script type="text/javascript">  //获取邮箱验证码
        var countdown=-1;
        $(".getemailcode").click(function(){
            if(!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test($("#newemail").val())){
                $("#newemail").focus();
                dialog.alert({
                    msg:'请输入有效的邮箱地址！',
                    buttons:['确定']
                },function(ret){
                    console.log(ret)
                });
                return false;
            };
            if (countdown<1) {
                $.ajax({
                    url:"ecode_modify",
                    dataType:"json",
                    type:"post",
                    data:$("form").serialize(),
                    success:function(result){
                        if(result.status=="1"){
                            countdown = 60;
                            settime($("#getemailcode"));
                            dialog.alert({
                                msg:'验证码已发送至您的邮箱，请注意查收。',
                                buttons:['确定']
                            });
                        }
                        else {
                            dialog.alert({
                                msg:''+result.tips,
                                buttons:['确定']
                            });
                        }
                    },
                    error:function(result){
                        console.log(result);
                        dialog.alert({
                            msg:'系统繁忙！',
                            buttons:['确定']
                        });
                    }
                });
            }
        });
        function settime(obj) {
            if (countdown == 0) {
                obj.removeClass("layui-btn-disabled");
                obj.addClass("getemailcode");
                obj.html("获取验证码");
                return;
            } else if(countdown > 0){
                obj.addClass("layui-btn-disabled");
                obj.removeClass("getemailcode");
                obj.html(countdown + "秒后重获");
                countdown--;
            }
        }
        setInterval("settime($(\"#getemailcode\"))",1000);
        </script>

    </body>
</html>
